<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>主页</title>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/json2.js"></script>
		<script src="js/jquery.getUrlParam.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet"/>
		<script type="text/javascript" charset="UTF-8">
			mui.init();
		</script>
	</head>

	<style>
			ul {
				font-size: 18px;
				color: #000;
			}
			img{
				-webkit-transform: rotateY(360deg);
				animation: rotation 15s linear infinite;
				-moz-animation: rotation 15s linear infinite;
				-webkit-animation: rotation 15s linear infinite;
				-o-animation: rotation :; linear infinite;
				border-radius: 250px;
				width: 200px;
				height: 88px;
			}
			table{
				border: 1px solid #CCCCCC;
				text-align: center;
			}
			.spang{
				text-align: right;
				font-size: 18px;
				color: #8f8f94;
			}
			.table-background{
				margin-top: 50px;
				background: #FFFFFF;
			}
			.tbtb{
				color: #007AFF;
			}
			
			.btn{
				width: 80px;
				border-color:#007AFF;
				margin: 8px;
				color: #007AFF;
			}
			.ems{
				color: red;
			}
			.emsf{
				color: #007AFF;
			}
			.jdbtn{
				width: 105px;
				height: 40px;
				border-color:#007AFF;
				margin:8px;
				color: #ffffff;
				background: #007AFF;
			}
			.tdbtn{
				width: 105px;
				height: 40px;
				border-color:#FF0000;
				margin:8px;
				color: #ffffff;
				background: #FF0000;
			}
			.aa{
				margin-bottom:20px;
			}
			.tr{
				width: 100%;
				color: #330000;
			}
			@-webkit-keyframes rotation{
				from {-webkit-transform: rotate(0deg);}
				to {-webkit-transform: rotateY(360deg);}
			}
			
		</style>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			
			<h1 class="mui-title" style="font-size: 25px;">Handling Orders To Be Received</h1>
			<!--<a id='setting' class="mui-icon mui-icon-bars mui-pull-right"></a>-->
			
		</header>
		<div class="table-background">
				<img src="images/FAST kitchen.png" />
			<div class="aa"><hr/></div>
			<!--表格的开始-->
			<table  width="94%"
					id="tb"
	       			border="1px"
	        		align="center">
			   	<tr class="tr">
				   	<th width="20%;">Order Id</th>
				   	<th width="8%;">Table</th>
				   	<th width="25%;">Food Name</th>
				   	<th width="8%;">Number</th>
				   	<th width="60%;">Operation</th>
				   	</tr>
			</table>
		
			<div class="aa"><hr/></div>
		</div>
		
		<script type="text/javascript">
		
			var API="http://180.141.91.221:8069/RmApi/pos/get_order_details?"
			
			var APIS="http://180.141.91.221:8069/RmApi/pos/set_order_details_state?"
			
			var id_main;
			/**
			 * 方法开始
			 */
			function a(){
				id_main = location.search.slice(9);//接收id
//				id_main = id;
//				var id_main = UrlParam.paramValues("id_main");
				
				var source = new EventSource(API+"belonged_to_id="+id_main+"&cooking_state=1");
				source.onmessage = function(event) {
					var str="";
					var id,table_number,state,food_name,number;   
					var result = event.data;  //进行遍历之前得先解析出标准的json数组格式即[{},{}]
					var receipt=JSON.parse(result);
					//console.log(receipt.foods.length);
					$('#tb tr:gt(0)').remove();
					for (var i = 0; i < receipt.foods.length; i++) {
				        //data[i]表示获得第i个json对象即JSONObject
				        //data[i]通过.字段名称即可获得指定字段的值
				        foods_id=receipt.foods[i].id; //订单id
                        table_number=receipt.foods[i].table_number;  //桌号
                        food_name=receipt.foods[i].food_name;  //菜名
                        number=receipt.foods[i].number;  //份量
                        state=receipt.foods[i].cooking_state;  //状态
                        cooking_time=receipt.foods[i].cooking_time;//烹饪时间
                        var htmlstate="";
                        if(state=="1"){
                        	htmlstate="<em class='ems' id='em'>Missed order！</em>";
                        }
                        if(state=="2"){
                        	htmlstate="<em class='emsf' id='em'>Received！Cooking time："+cooking_time+" mins</em>";
                        }
                        console.log("receipt:"+state);
                        str += "<tr>"+
                            "<td id=>"+foods_id+"</td>"+
	                        "<td class='tbtb'>"+table_number+"</td>"+
	                        "<td>"+food_name+"</td>"+
	                        "<td>"+number+"</td>"+
	                        "<td>"+
	                        	"<button name="+"a"+" class='btn' onclick="+"jiedan(this)"+" id="+foods_id+" type="+"button"+">"+
								"15"+
								"</button>"+
								"<button name="+"a"+" class='btn' onclick="+"jiedan(this)"+" id="+foods_id+" type="+"button"+">"+
								"30"+
								"</button>"+
								"<button name="+"a"+" class='btn' onclick="+"jiedan(this)"+" id="+foods_id+" type="+"button"+">"+
								"45"+
								"</button>"+
								"</br>"+
								htmlstate+
								"</br>"+
								"<button class='jdbtn' onclick='jiaodan(this)' id="+foods_id+" type="+"button"+">"+
								"Documents"+
								"</button>"+
		                        "<button class='tdbtn' onclick='tuidan(this)' id="+foods_id+" type="+"button"+">"+
								"Refund"+
								"</button>"+
						    "</td></tr>";
	                }	                       
	                $('#tb').append(str);
				}
			};
			a();
/*
 * 第一次写的ajax,get请求
 * function a(){
        $.ajax({
            type: "get",       //请求方式
            dataType: "json",   //json数据
            timeout: 10000,     //设置超时
            url: "http://192.168.1.18:8069/RmApi/get_order_details?belonged_to_id=2&state=1", //&state=0
            success: function (foods) { //发送请求成功
                console.log(foods);
                $('#tb tr:gt(0)').remove();//删除之前的数据
                var str = "";
                var receipt = "";
                var id,table_number,state,food_name,number;
                for ( i=0;i < foods.foods.length; i++) { //遍历data数组
                   
                    foods_id=foods.foods[i].id; //订单id
                    table_number=foods.foods[i].table_number;  //桌号
                    food_name=foods.foods[i].food_name;  //菜名
                    number=foods.foods[i].number;  //份量
                    state=foods.foods[i].state;  //状态
                    console.log("asd:"+state);

                    str += "<tr>"+
                    "<td class='tbtb'>"+table_number+"</td>"+
                    "<td>"+food_name+"</td>"+
                    "<td>微辣</td>"+
                    "<td>"+number+"</td>"+
                    "<td>"+
                    	"<button name="+"a"+" class='btn' onclick="+"jiedan(this)"+" id="+foods_id+" type="+"button"+">"+
						"15"+
						"</button>"+
						"<button name="+"a"+" class='btn' onclick="+"jiedan(this)"+" id="+foods_id+" type="+"button"+">"+
						"30"+
						"</button>"+
						"<button name="+"a"+" class='btn' onclick="+"jiedan(this)"+" id="+foods_id+" type="+"button"+">"+
						"45"+
						"</button>"+
						"</br>"+
						"<button class='jdbtn' onclick='jiaodan(this)' id="+foods_id+" type="+"button"+">"+
						"交单"+
						"</button>"+
                        "<button class='tdbtn' onclick='tuidan(this)' id="+foods_id+" type="+"button"+">"+
						"退单"+
						"</button>"+
				    "</td></tr>";
                }
                $('#tb').append(str); 
            },
            error: function (XMLResponse) {
        		alert("服务器端异常！：" + XMLResponse.responseText);
    		}
       });
    }
	a();
 */
			

			/****
			 * 
			 * 事件按钮    接单
			 * 
			 */

			function jiedan(element){
				
				var time=document.getElementById(element.id).innerText;
				var stamp=document.getElementById(element.id);
                document.onclick=function(){
                	var obj = event.srcElement;
                    if(obj.id == element.id){
                    	/**
                    	 * 获取按钮id里的数值
                    	 */
                    	var time=obj.innerText;
                    	/**
                    	 * 响应重定向
                    	 */
                    	
                        $.ajax({
							type: "get",
							url: APIS+"id="+element.id+"&cooking_state=2&cooking_time="+time,	
							dataType: "json",
							success: function(d){
								var isok,msg;
								isok=d.isok;
								msg=d.msg;
								if(isok=="true"){
									mui.toast('Receipt Success');
									stamp.disabled=true;
								}
								if(isok=="false"){
									stamp.disabled=true;
								}
							},
							error: function(e){
								mui.toast("Server Side Exception！"+e.responseText);
							}
						});
                    }
                } 
			}
			/**
			 * 交单
			 */
			function jiaodan(el){
				
				$.ajax({
					type: "get",
					url:APIS+"id="+el.id+"&cooking_state=3",
					dataType: "json",
					success: function(a){
						if(a.isok=="true"){
							mui.toast('Order Submitted');
						}else{
							mui.toast('Failure To Submit Order');
						}
					},
					error: function(ea){
						mui.toast("Server Side Exception！"+ea.responseText);
					}
				});
			}
			/**
			 * 退单
			 */
			function tuidan(ment){
				
				$.ajax({
					type: "get",
					url: APIS+"id="+ment.id+"&cooking_state=4",
					dataType: "json",
					success: function(e){
						
						if(e.isok=="true"){
							mui.toast("Refund");
						}else{
							mui.toast('Refund Fail');
						}
					},
					error: function(ew){
						mui.toast("Server side exception！"+ew.responseText);
					}
				});
			}
	</script>
	</body>

</html>